﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../dms/bootstrap.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/2.1.0-beta2/jquery.js"></script>
    <script src="../dms/moment.min.js"></script>
    <style>
        .KCanlandar_main{
            width:100%;
            height:300px;
            overflow:scroll;
            padding:5px;
            padding-top:0px;
        }
        .KCanlandar_row{
            display:flex;
            border-left:1px solid #fec46f;
        }        
        .KCanlandar_cell{
            padding:5px 0px;
            display:inline-block;
            border:1px solid #fec46f;
            border-left:0px;
            border-top:0px;            
            text-align:center;
        }
        .KCanlandar_cell.header{background-color:#f8e6ca;font-weight:600;color:#c79347;width:200px;}
        .KCanlandar_cell.firstCell{background-color:#fcf4e7;font-weight:600;color:#a66505;width:200px;}
        .KCanlandar_cell.taskItem{text-align:left; padding:3px;width:200px;}
    </style>
</head>
<body>
    <div class="KCanlandar_main">
        <div class="KCanlandar_row">
            <div class="KCanlandar_cell header">日期&星期</div>
            <div class="KCanlandar_cell header">周六</div>
            <div class="KCanlandar_cell header">周一</div>
            <div class="KCanlandar_cell header">周二</div>
            <div class="KCanlandar_cell header">周三</div>
            <div class="KCanlandar_cell header">周四</div>
            <div class="KCanlandar_cell header">周五</div>
            <div class="KCanlandar_cell header">周六</div>            
        </div>
        <div class="KCanlandar_row">
            <div class="KCanlandar_cell header">资源</div>
            <div class="KCanlandar_cell header">9月1日</div>
            <div class="KCanlandar_cell header">9月2日</div>
            <div class="KCanlandar_cell header">9月3日</div>
            <div class="KCanlandar_cell header">9月4日</div>
            <div class="KCanlandar_cell header">9月5日</div>
            <div class="KCanlandar_cell header">9月6日</div>
            <div class="KCanlandar_cell header">9月7日</div>
        </div>
        <div class="KCanlandar_row">
            <div class="KCanlandar_cell firstCell">Tiger</div>
            <div class="KCanlandar_cell taskItem" style="width:600px;">
                1:这是第一个任务<br />
                2:task2<br />
                3:task3
            </div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem" style="width:400px;">这是第二个任务</div>
            <div class="KCanlandar_cell taskItem" style="width:200px;">这是第三个任务</div>
        </div>
        <div class="KCanlandar_row">
            <div class="KCanlandar_cell firstCell">Lion</div>
            <div class="KCanlandar_cell taskItem" style="width:400px;">这是第一个任务</div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem" style="width:400px;">这是第二个任务</div>
            <div class="KCanlandar_cell taskItem" style="width:400px;">这是第三个任务</div>
        </div>
        <div class="KCanlandar_row">
            <div class="KCanlandar_cell firstCell">Fanny</div>           
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
            <div class="KCanlandar_cell taskItem"></div>
        </div>
    </div>

    <script>
       
    </script>
</body>
</html>